<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-input placeholder="请输入角色名字" v-model="roleName" ></el-input>
            </el-col>
            <el-col :span="16">
                <el-button  type="primary" icon="el-icon-search" @click="querybyroleName">查询</el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="el-icon-edit" circle @click="addrole"> 添加</el-button>
            </el-col>
        </el-row>
        <br> <br>
        <el-table
                :data="roles"
                style="width: 100%">
            <el-table-column
                    label="编号"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-edit"></i>
                    <span style="margin-left: 10px">{{ scope.row.id}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="角色名称"
                    width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>角色名称: {{ scope.row.roleName}}</p>
                        <p>介绍: {{ scope.row.remark}}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.roleName }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态"
                    width="180">
                <template slot-scope="scope">
                    <i v-if="scope.row.roleState==0" class="el-icon-success"></i>
                    <i class="el-icon-error" v-else></i>
                    <span style="margin-left: 10px" v-if="scope.row.roleState==0">启用</span>
                    <span style="margin-left: 10px" v-else>冻结</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="Editrole(scope)">编辑</el-button>

                    <el-popconfirm v-if="scope.row.roleState==0"
                                   confirm-button-text='确定'
                                   cancel-button-text='取消'
                                   icon="el-icon-info"
                                   icon-color="red"
                                   title="你确定冻结吗？"
                                   @confirm="handleDelete(scope)"
                                >
                        <el-button
                                plain
                                slot="reference"
                                size="mini"
                                type="danger"
                                icon="el-icon-error">冻结角色</el-button>
                    </el-popconfirm>
                    <el-popconfirm v-else
                                   title="你确定解冻吗？"
                                   @confirm="handleDelete(scope)"
                    >
                        <el-button
                                plain
                                slot="reference"
                                size="mini"
                                type="success"
                                icon="el-icon-success"
                        >解冻角色</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <template>
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageno"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </template>


        <el-dialog
                title="添加员工"
                :visible.sync="dialogVisible"
                width="35%"
                :before-close="handleClose">
            <component ref="roleadd" :is="cont"></component>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">关 闭</el-button>
  </span>
        </el-dialog>


        <el-dialog
                title="编辑员工"
                :visible.sync="dialogVisible"
                width="35%"
                :before-close="handleClose">
            <component ref="editrole" :is="cont"></component>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">关 闭</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>

    import addRoles from "./addRoles";
    import EditRole from "./EditRole";

    export default {
        name:"Roles",
        data() {
            return {
                pageno:1,   //页码
                pagesize:5,   //页size
                total:1,
                roles:[],
                roleName:"",
                cont:"",
                dialogVisible: false
            }
        },
        methods: {
            //获取员工数据
            getdata() {
                var roles = new URLSearchParams();
                roles.append("pageno", this.pageno);
                roles.append("pagesize", this.pagesize);
                roles.append("roleName", this.roleName)

                this.$axios.post("showallroles.action",roles).
                then(response => {
                    this.roles = response.data.records
                    this.total = response.data.total;
                }).catch()
            },
            //修改
            Editrole(scope) {
                this.cont = EditRole
                this.dialogVisible = true;
                this.$nextTick(itme=>{
                    this.$refs.editrole.getroles(scope.row.id)
                })

            },
            //修改状态
            handleDelete(scope) {
                var roles = new URLSearchParams();
                roles.append("id",scope.row.id);
                roles.append("roleState",scope.row.roleState)
                this.$axios.post("eidebystate.action",roles).
                then(res=>{
                    if (res.data.msg=="成功"){
                        this.$message.success("成功")
                        this.getdata()
                    }else if (res.data.msg=="该角色已被使用不能冻结"){
                        this.$message.warning("该角色已被使用不能冻结")
                    }else{
                        this.$message.error("失败")
                    }

                }).
                catch()
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagesize = val;
                this.getdata()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageno = val;
                this.getdata()
            },
            //查询角色信息
            querybyroleName(){

                this.roleName = this.roleName
                this.getdata();
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //添加角色
            addrole(){
                this.cont = addRoles;
                this.dialogVisible = true;
            }
        },
        created() {
            this.getdata();
        }
    }
</script>


<style scoped>

</style>